<!doctype html>
<html>
<head>
	<script src="/../../assets/js/react.js"></script>
	<script src="/../../assets/js/react-dom.js"></script>
	<script src="/../../assets/js/browser.min.js"></script>
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<label>demo1</label>
	<div id="container"></div>
	<script type="text/babel">
		ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById("container") );
	</script>
	<hr/>
	<label>demo2</label>
	<div id="demo2"></div>
	<script type="text/babel">
		var names = ['java', 'c', 'c++'];
		ReactDOM.render(
			<div>{
				names.map(function (name){
					return <div>Hello, {name}!</div>
				})
			}
			</div>,
			document.getElementById('demo2')
		);
	</script>
	<hr/>
	<label>demo3</label>
	<div id="demo3"></div>
	<script type="text/babel">
		var arr = [
			<h2>Hello World!</h2>,
			<h3>React is awesome</h3>
		];
		ReactDOM.render(
			<div>{arr}</div>,
			document.getElementById('demo3')
		);
	</script>
	<hr/>
	<label>demo4</label>
	<div id="demo4"></div>
	<script type="text/babel">
		var HelloMessage = React.createClass({
			render:function(){
				return <h1>Hello {this.props.name}</h1>;
			}
		});

		ReactDOM.render(
			<HelloMessage name='黄勃'/>,
			document.getElementById('demo4')
		);
	</script>
	<hr/>
	<label>demo5</label>
	<div id="demo5"></div>
	<script type="text/babel">
		var NotesList = React.createClass({
			render:function() {
				return (
					<ol>
					{
						React.Children.map(this.props.children, function(child){
							return <li>{child}</li>
						})
					}
					</ol>
				);
			}
		});

		ReactDOM.render(
			<NotesList>
				<label>华容</label>
				<label>起名</label>
			</NotesList>,
			document.getElementById('demo5')
		);
	</script>
	<hr/>
	<label>demo6</label>
	<div id="demo6"></div>
	<script type="text/babel">
		var MyTitle = React.createClass({
			getDefaultProps: function(){
				return {
					title : '我'
				};
			},
			
			propTypes:{
				title: React.PropTypes.string.isRequired
			},

			render:function(){
				return <h2>{this.props.title}</h2>
			}
		});

		var data = 123;
		ReactDOM.render(
			<MyTitle title={data}/>,
			document.getElementById('demo6')
		);

		ReactDOM.render(
			<MyTitle/>,
			document.getElementById('demo6')
		);
	</script>
	<hr/>
	<label>demo7</label>
	<div id="demo7"></div>
	<script type="text/babel">
		var Demo7Component = React.createClass({
			handleClick:function(){
				this.refs.myTextInput.focus();
			},

			render:function(){
				return (
					<div>
						<input type = "text" ref="myTextInput"/>
						<input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
					</div>
				)
			}
		});

		ReactDOM.render(
			<Demo7Component/>,
			document.getElementById('demo7')
		);
	</script>
	<hr/>
	<label>demo8</label>
	<div id="demo8"></div>
	<script type="text/babel">
		var LikeButton = React.createClass({
			getInitialState: function(){
				return {liked: false};
			},

			demo8HandleClick:function(){
				this.setState({liked: !this.state.liked});
			},
			render:function(){
				var text = this.state.liked? 'like' : 'haven\'t liked';
				return(
					<p onClick={this.demo8HandleClick}>You {text} this.Click to toggle.</p>
				);
			}
		});

		ReactDOM.render(
			<LikeButton/>,
			document.getElementById('demo8')
		);
	</script>
	<hr/>
	<label>demo9</label>
	<div id="demo9"></div>
	<script type="text/babel">
		var Demo9Input = React.createClass({
			getInitialState: function(){
				return {text: 'Hello!'}
			},

			demo9HandleChange: function(event) {
				this.setState({text: event.target.value});
			},
			
			render: function(){
				var value = this.state.text;
				return (
					<div>
						<input type='text' value={value} onChange={this.demo9HandleChange}/>
						<p>{value}</p>
					</div>
				);
			}
		});
		
		ReactDOM.render(
			<Demo9Input/>,
			document.getElementById('demo9')
		);
	</script>
	<hr/>
	<label>demo10</label>
	<div id="demo10"></div>
	<script type="text/babel">
		var Demo10 = React.createClass({
			getInitialState: function(){
				return {
					opacity: 1.0
				};
			},

			componentDidMount: function(){
				this.timer = setInterval(function(){
					var opacity = this.state.opacity;
					opacity -= 0.5;
					if(opacity < 0.1) {
						opacity = 1;
					}
					this.setState({opacity:opacity});
				}.bind(this), 100);
			},

			render: function(){
				return (
					<div style={{opacity: this.state.opacity}}>
						Hello {this.props.name}
					</div>
				);
			}
		});

		ReactDOM.render(
			<Demo10 name='World!'/>,
			document.getElementById('demo10')
		);
	</script>
	<hr/>
	<label>demo11</label>
	<div id="demo11"></div>
	<script type="text/babel">
		var Demo10 = React.createClass({
			getInitialState: function(){
				return {
					username:'',
					lastGistUrl:''
				};
			},

			componentDidMount:function(){
				$.get(this.props.source, function(result) {
					var lastGist = result[0];
					if (this.isMounted) {
						this.setState({
							username: lastGist.owner.login,
							lastGistUrl: lastGist.html_url
						});
					}
				}.bind(this));
			},

			render:function(){
				return(
					<div>
						{this.state.username}'s last gist is 
						<a href={this.state.lastGistUrl}>here</a>.
					</div>
				);
			}
		});

		ReactDOM.render(
			<Demo10 source="https://api.github.com/users/octocat/gists"/>,
			document.getElementById('demo11')
		);
	</script>
	<hr/>
	<label>demo12</label>
	<div id="demo12"></div>
	<script type="text/babel">
		var RepoList = React.createClass({
			getInitialState: function(){
				return({
					loading: true,
					data: null,
   					error: null
				});
			},

			componentDidMount() {
				this.props.promise.then(
					value => this.setState({loading: false, data: value}),
					error => this.setState({loading: false, error: error})
				);
			},

			render: function(){
				
				if(this.state.loading) {
					return <span>loading...</span>;
				} else if (this.state.error != null) {
					return <span>Error:{this.state.error.message}</span>;	
				} else {
					var repos = this.state.data.items;
					var repoList = repos.map(function (repo){
						return(
							<li>
								<a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} stars)<br/> {repo.description}
							</li>
						);
					});
					return (
						<main>
							<h1>Most Popular JavaScript Projects in Github</h1>
							<ol>{repoList}</ol>
						</main>
					);
				}
			}
		});
		
		ReactDOM.render(
			<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
			document.body
		);	
	</script>
	
</body>
</html>